<template>
    <div class="table-page">
        <div class="table-operation-box">
            <el-button
                type="primary"
                icon="el-icon-plus"
                style="margin-bottom: 2em"
                @click="clickAdd('添加')"
            >添加一级sku
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                :tree-props="{
                    children: 'children',
                }"
            >

                <el-table-column prop="name" label="名称" min-width="180">
                </el-table-column>
                <el-table-column prop="id" label="code" min-width="180">
                </el-table-column>
                <el-table-column prop="examName" label="所属考试" min-width="180">
            </el-table-column>

                <el-table-column
                    prop="remark"
                    label="备注"
                    min-width="180"
                ></el-table-column>
                <el-table-column
                    prop="sort"
                    label="排序"
                    min-width="180"
                ></el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                    <template slot-scope="scope">
                        <k-tag :tag="scope.row.enable ? { desc:'已启用',color:'#6ADA8D'} : { desc:'已禁用',color:'#fb4e4e'}"></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="创建时间"
                    width="160"
                ></el-table-column>
                <el-table-column label="操作" min-width="400" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="
                                clickSimpleEdit(
                                    scope.row,
                                    '编辑',
                                    () => {},
                                    coverData
                                )
                            "
                        >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.parentId"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-plus"
                            :loading="scope.row.opLoading"
                            @click="
                                addChild(scope.row, '添加子级')
                            "
                        >添加子级
                        </el-button>
                        <el-button
                            v-if="scope.row.enable"
                            :loading="scope.row.opLoading"
                            type="text"
                            size="mini"
                            class="warning"
                            icon="el-icon-lock"
                            @click="lock(scope.row.id, false)"
                        >禁用
                        </el-button>
                        <el-button
                            v-if="!scope.row.enable"
                            :loading="scope.row.opLoading"
                            size="mini"
                            type="text"
                            icon="el-icon-unlock"
                            @click="lock(scope.row.id, true)"
                        >启用
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            type="text"
                            size="mini"
                            class="danger"
                            icon="el-icon-delete"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/package/sku/attr/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            width="50%"
        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="8em"
                :rules="dataFormRule"
                class="table-edit-from"
            >
                <el-form-item label="code" prop="id">
                    <el-input v-model="dataForm.id" :disabled="!dataForm.addAction"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="dataForm.name"></el-input>
                </el-form-item>
                <div>
<!--                    <el-form-item label="所属考试" prop="examName">-->
<!--                        <el-input v-model="dataForm.examName" disabled></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="产品类型" prop="examType">
                        <el-select v-model="dataForm.examType" clearable >
                            <el-option label="职业题库" value="zhiye"></el-option>
                            <el-option label="高教题库" value="gjtk"></el-option>
                        </el-select>
                    </el-form-item>-->

                    <el-form-item
                        label="行业"
                        prop="industryId"
                    >
                        <el-select
                            v-model="dataForm.industryId"
                            placeholder="请选择行业"
                            clearable
                        >
                            <el-option
                                v-for="item in industryData"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="考试"
                        prop="examId"
                    >
                        <el-select
                            v-model="dataForm.examId"
                            placeholder="请选择考试"
                            clearable
                            filterable
                            reserve-keyword
                        >
                            <el-option
                                v-for="item in examData"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model.number="dataForm.sort"></el-input>
                </el-form-item>
                <el-form-item label="是否可用" prop="enable">
                    <el-radio-group v-model="dataForm.enable">
                        <el-radio :label="true">启用</el-radio>
                        <el-radio :label="false">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="dataForm.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                >取 消</el-button
                >
                <el-button :loading="submitFlag" type="primary" @click="save"
                >保 存</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {changeSkuAttrStatus} from "@/api/exam";
import {get} from "@/api/request";

export default {
    name: "SkuAttr",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            maps: new Map(),
            industryData: [],
            industryFlag: false,
            examFlag: false,
            examData:[],
            queryData: {
                classificationId: ""
            },
            classficationQueryData: {
                size: 1000
            },
            ppId: null,
            rowData: {},
            key: 0,
            initAddForm: {
                id: null,
                name: null,
                remark: null,
                parentId: null,
                enable: true,
                examName:"通用",
                examId:null,
                industryId:null,
            },
            addFirst: false,
            initList: [],
            dataFormRule: {
                id: [
                    {required: true, message: "请输入code", trigger: "blur"}
                ],
                name: [
                    {required: true, message: "请输入名称", trigger: "blur"}
                ]
            }
        };
    },
    computed: {
        ...mapState({})
    },
    mounted() {
    },
    watch: {
        // "dataForm.examType"(examType) {
        //     if (examType === "gjtk") {
        //         this.dataForm.industryId = "gjtk";
        //     } else if (this.dataForm.industryId === "gjtk") {
        //         this.dataForm.industryId = null;
        //     }
        // },
        "dataForm.industryId"(industryId) {
            this.examData=[];
            this.dataForm.examId="";
            if(industryId){
                this.loadExam(industryId);
            }

        },
        // "dataForm.examId"(examId) {
        //     if (!examId || examId === "0"){
        //         this.dataForm.examName="通用";
        //     }else {
        //         this.changeExamName(examId);
        //     }
        //
        // },
    },
    created() {
        this.loadIndustry();
    },
    methods: {
        search(queryData) {
            this.loadTable("/exam/package/sku/attr/getFirstPage", queryData, true);
        },
        lock(id, status) {
            changeSkuAttrStatus({id: id, enable: status}).then(res => {
                this.$message.success("修改成功");
                this.search();
            })
        },
        coverData(data) {
            data.examType =
                data.industryId === "gjtk"
                    ? "gjtk"
                    : "zhiye";
            // this.loadOldData(data.id);
            return { ...data};
        },
        loadIndustry() {
            this.industryFlag = true;
            get("/exam/industry/list",{size: 1000})
                .then(res => {
                    this.industryData = res;
                })
                .finally(() => {
                    this.industryFlag = false;
                });
        },
        loadExam(industryId, name) {
            this.examFlag = true;
            get("/exam/exam/list", {
                industryId,
                name,
                size: 1000
            })
                .then(res => {
                    this.examData = res;
                })
                .finally(() => {
                    this.examFlag = false;
                });
        },
        changeExamName(examId){
            this.examData.forEach( e =>{
                if(examId === e.id){
                    this.dataForm.examName=e.name;
                    return;
                }
            })
        },
        addChild(row, dialogFormTitle) {
            this.dataForm = {...this.initAddForm}
            this.dataForm.parentId = row.id;
            this.dataForm.addAction = true;
            this.dialogFormVisible = true;
            this.dialogFormTitle = dialogFormTitle;
        },
        save() {
            this.formDataSave("/exam/package/sku/attr/update");
        }
    }
};
</script>

<style lang="scss" scoped></style>
